---
title: スタイル
description: すべてのコンポーネントは、propsを使用してスタイリングができるように設計されています。
---

## 概要

ライブラリが提供する主要な概念のリストはこちらです。

<LinkList
  items={[
    { label: "Style Props", href: "/docs/styling/style-props" },
    { label: "条件付きスタイル", href: "/docs/styling/conditional-styles" },
    { label: "レスポンシブデザイン", href: "/docs/styling/responsive-design" },
    { label: "カラーモード", href: "/docs/styling/color-mode" },
    { label: "カラースキーム", href: "/docs/styling/color-scheme" },
    {
      label: "CSSカスタムプロパティ",
      href: "/docs/styling/css-custom-properties",
    },
    { label: "CSS値関数", href: "/docs/styling/css-value-functions" },
    { label: "インターポレーション", href: "/docs/styling/interpolation" },
    { label: "アニメーション", href: "/docs/styling/animation" },
    { label: "フォーカスリング", href: "/docs/styling/focus-ring" },
    { label: "グローバルスタイル", href: "/docs/styling/global-styles" },
    { label: "リセットスタイル", href: "/docs/styling/reset-styles" },
    { label: "レイヤースタイル", href: "/docs/styling/layer-styles" },
    { label: "テキストスタイル", href: "/docs/styling/text-styles" },
    { label: "アットルール", href: "/docs/styling/at-rules" },
    { label: "カスケードレイヤー", href: "/docs/styling/cascade-layers" },
  ]}
/>

## 使い方

[Style Props](/docs/styling/style-props)は、propsを使用して要素にスタイルを適用します。Style Propsは、[CSSプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/Properties)に準拠しており、すべてのプロパティをキャメルケースで提供しています。

```tsx preview
<Box p="md" bg="bg.contrast" color="fg.contrast">
  Box
</Box>
```

:::note
[Style Props](/docs/styling/style-props)は、[@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data)を使用しています。ライブラリが更新されると、Style Propsも定期的に更新が行われます。
:::
